import React from "react";
import api from "src/http/api";
import { StorageProps } from "src/utils/interface";

import {
  Table,
  Space,
  Button,
  Tag,
  Popconfirm,
  notification,
  TableProps,
} from "antd";
import { ReadOutlined, DeleteOutlined } from "@ant-design/icons";
import SearchForm from "src/components/SearchForm";
import StorageInfoDrawer from "src/components/StorageInfoDrawer";
import OpenStorageFormBtn from "./StorageForm";

import globalStyles from "src/public/css/index.scss";
import styles from "./index.scss";

const { useEffect, useState, useRef } = React;

const Storage: React.FC = () => {
  const [curStorageUri, setCurStorageUri] = useState("");

  // --------------------- detail详情部分的变量与逻辑：开始 -----------------------
  const [detailVisible, setDetailVisible] = useState(false);

  const onDetailClose = () => setDetailVisible(false);

  const onDetailOpen = (storageUri: string) => {
    setCurStorageUri(storageUri);
    setDetailVisible(true);
  };
  // --------------------- detail详情部分的变量与逻辑：结束 -----------------------

  // --------------------- 表格部分的变量与逻辑：开始 -----------------------
  const [tableData, setTableData] = useState([] as StorageProps[]);
  const tableDataFlag = useRef(false); // 当返回的表格数据为空时，停止 loading 状态

  // 处理 查找 请求
  const handleAutoSubmit = (formData: any) => {
    api.getStorage(formData).then((res: any) => {
      setTableData(res.data);
    });
  };

  const deleteStorage = (record: StorageProps) => {
    api.deleteStorage({ storageUri: record.storageUri }).then(async () => {
      await api.getStorage().then((res: any) => {
        setTableData(res.data);
      });

      notification.success({
        message: "Success",
        description: "删除 storage 成功",
      });
    });
  };
  const tableProps: TableProps<StorageProps> = {
    bordered: true,
    rowKey: "storageUri",
    loading: tableData.length === 0 && !tableDataFlag.current,
    dataSource: tableData,
    className: (globalStyles as any).tableTdPadding,
    columns: [
      {
        title: "Uri",
        dataIndex: "storageUri",
        width: 250,
      },
      {
        title: "Type",
        dataIndex: "type",
        width: 150,
        render: (value) => <Tag color="blue">{value}</Tag>,
      },
      {
        title: "Description",
        dataIndex: "description",
      },
      {
        title: "Operations",
        width: 300,
        render: (value, record) => (
          <Space>
            <OpenStorageFormBtn
              id={record.storageUri}
              type="edit"
              setTableData={setTableData}
              storageUri={record.storageUri}
            />
            <Button
              icon={<ReadOutlined />}
              onClick={() => onDetailOpen(record.storageUri)}
            >
              详情
            </Button>
            <Popconfirm
              title="确定要删除吗？"
              okText="确定"
              cancelText="取消"
              onConfirm={() => deleteStorage(record)}
            >
              <Button danger icon={<DeleteOutlined />}>
                删除
              </Button>
            </Popconfirm>
          </Space>
        ),
      },
    ],
  };

  useEffect(() => {
    api.getStorage().then((res: any) => {
      if (res.data.length === 0) {
        tableDataFlag.current = false;
      } else {
        tableDataFlag.current = true;
      }
      setTableData(res.data);
    });
  }, []);
  // --------------------- 表格部分的变量与逻辑：结束 -----------------------

  return (
    <div className={(styles as any).content}>
      <div className={(styles as any).query}>
        <SearchForm type="storage" onAutoSubmit={handleAutoSubmit} />
        <OpenStorageFormBtn type="add" setTableData={setTableData} id="add" />
      </div>

      <Table {...tableProps} />

      <StorageInfoDrawer
        storageUri={curStorageUri}
        visible={detailVisible}
        onClose={onDetailClose}
      />
    </div>
  );
};

export default Storage;
